<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="dminson" v-for="(item, i) in list" :key="i">
        <img :src="item.url" alt="数据">
        <div class="dminbot">
          <div class="dmintit">{{ item.tit }}</div>
          <div class="dmintext">
            {{ item.text }}
          </div>
          <div class="butbox">
            <button class="dminbut" @click="tomore(i)">MORE</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';


export default {
  props:{
    list:Array
  },
  data() {
    return {
      dminlist:[],
      swiper: null,
    };
  },
  mounted() {
    // Initialize Swiper
    this.swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  },
  beforeDestroy() {
    // Destroy Swiper instance when component is destroyed
    if (this.swiper) {
      this.swiper.destroy();
    }
  },
};
</script>

<style scoped>
.dminbox {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 20px;
}

.dmin {
  width: 66%;
  margin: auto;
}

.dmintop {}

.lookmore {}

.dminA {}

.dmincent {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.dminson {
  width: 30%;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: box-shadow 0.3s;
}


.dminson img {
  transition: all 1.5s;
}

.dminson:hover img {
  transform: scale(1.1);
}

.dminson:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.dminson:hover .dminbot {
  background-color: #0b6cfe;
  color: #ffffff;

  & .dmintext {
    color: #ffffff;
  }
}

.dminson:hover .dminbut {
  border: solid 1px #f7ab73;
  color: #ffffff;
  background-color: #f7ab73;
}

.dminbot {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #ffffff;
  padding-top: 10px;
}

.dmintit {
  margin: 10px;
  font-size: 25px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.dmintext {
  margin: 10px;
  font-size: 16px;
  color: #6e6e6e;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.butbox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.dminbut {
  margin: 10px;
  border: solid 1px #5cd297;
  padding: 3px 6px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
}

</style>
